<template>
  <div class="page-not-found">
    <img
      src="@/assets/images/404.jpg"
      alt="404"
    >
    <div class="text">您访问的页面不存在，请联系相关IT人员</div>

    <p-button
      class="go-back"
      type="primary"
      @click="goBack"
    >
      返回上一页
    </p-button>
  </div>
</template>

<script>
  export default {
    name: 'NotFound',
    methods: {
      goBack () {
        this.$router.back()
      }
    }
  }
</script>

<style lang="less" scoped>
  .page-not-found {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    // background: url("~@/assets/images/404.jpg") center center;
    background: #fff;
    background-size: cover;

    .text {
      position: absolute;
      bottom: 120px;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 25px;
      font-weight: 500;
      color: #f57f8a;
    }

    img {
      position: absolute;
      top: 40%;
      left: 0;
      right: 0;
      margin: auto;
      width: 1320px;
      transform: translateY(-50%);
    }

    .go-back {
      position: absolute;
      left: 50%;
      bottom: 10%;
      transform: translateX(-50%);
    }
  }
</style>
